<template>
    <div class="list-content-container">
        <!--列表内容-->
        <div class="list-content">
            <el-table
                :data="tableData"
                style="width: 100%;"
                :height="tableHeight"
                ref="listContentEl">
                <!--序号列-->
                <el-table-column
                    type="index"
                    label="序号"
                    width="50"
                    align="center">
                </el-table-column>

                <!--具体内容列-->
                <el-table-column v-for="item in tabelColumTitle"
                                 :prop="item.prop"
                                 :label="item.label"
                                 :width="item.width"
                                 :header-align="item.headerAlign"
                                 :align="item.align?item.align:'left'"
                                 :formatter="item.formatter?item.formatter:nothingTodo">
                </el-table-column>

                <!--操作列-->
                <el-table-column
                    fixed="right"
                    label="操作" v-if="ifOptColumn">
                    <template slot-scope="scope">
                        <el-button v-for="(item ,index) in optColumnFunc"
                                   @click.native.prevent=handlerProxy(scope.row,item.methodName)
                                   :type="item.type"
                                   :size="item.size"
                                   :key="index">
                            {{ item.methodLabel }}
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <!--分页对象-->
        <div class="list-pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[15, 30, 45, 60]"
                :page-size=pageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total=total>
            </el-pagination>
        </div>

    </div>
</template>

<script>
    export default {
        name: "ListContent",
        data() {
            return {
                // 表格高度必须设置为null，
                // 否则不会调用mounted里面的tableHeight
                tableHeight: null,

                // 表单数据
                tableData:[],

                // 当前页
                currentPage:1,
                // 每页记录数
                pageSize:15,
                // 总记录条数
                total:0,
            }
        },

        props: {
            // 是否需要显示操作列表
            ifOptColumn: {
                type: Boolean,
                default: false
            },
            // 每一列对应的操作函数数组
            optColumnFunc: {
                type: Array,
                default: []
            },
            // 每一列的列头以及和属性的对应关系数组
            tabelColumTitle: {
                type: Array,
                default: []
            },
            // 搜索条件栏的高度
            searchHeight: {
                default: 40
            },
            // 传递过来的列表参数
            params:{
                default:{}
            },
            // 访问的后台地址
            url:{
                default:""
            }
        },
        watch:{
        },
        created() {
            this.init();
        },
        mounted() {
            // 设置这个值-header-bread-tag - （搜索条件的高度） - 底部的分页栏
            // 这里暂时的解决方案是延迟加载，否则拿不到传递过来的高度
            setTimeout(() => {
                this.tableHeight = window.innerHeight - 60 - 36 - 50 - this.searchHeight - 42;
            }, 100)

        },
        methods: {
            init() {
                let allparams = {
                    thisPage:this.currentPage,
                    pageSize:this.pageSize
                };

                // 整合列表的参数
                if(this.params != null) {
                    for(var i in this.params) {
                        allparams[i] = this.params[i]
                    }
                }

                this.$axios.$PostJsonNoLoading({
                    url: this.url,
                    data: allparams,
                }, result => {
                    var resultData = result.data;
                    // 设置列表数据
                    this.tableData = resultData.dataList;
                    // 设置分页总数
                    this.total = resultData.count;

                }, error => {
                    this.$layer.showError("获取列表信息异常", 3000, () => {
                    });
                })
            },
            // 分页的方法
            handleSizeChange(val) {
                // 更新当前页显示的总数
                this.pageSize = val;
                // 重新调用初始化方法
                this.init();
            },
            // 跳转页面
            handleCurrentChange(val) {
                this.currentPage = val;
                this.init();
            },
            // 针对不需要格式化的列的默认的方法
            nothingTodo(row, column, cellValue, index) {
                // 返回原本的值
                return cellValue;
            },
            // 操作栏的点击事件
            handlerProxy(row, methodName) {
                this.$emit("handlerProxy",row,methodName);
            },
        }
    }
</script>

<style scoped lang="scss">
    .list-content-container {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;

        .list-content {
            padding: 0;
            margin: 0;
            margin-bottom: 36px;

            .cell {
                text-align: center;
            }
        }

        .list-pagination {
            z-index: 99999;
            /*background-color: #000;*/
            width: 100%;
            position: absolute;
            bottom: 0;
            text-align: right;
            padding-left: 5px;
            padding-right: 10px;

            .el-pagination {
                height: 36px;
                line-height: 36px;
                padding-top: 6px;
            }
        }
    }
</style>
